<template>
  <div>
    <Operate @add="add">添加招聘岗位</Operate>
    <el-scrollbar class="com_table">
      <el-table :data="formData" style="width: 100%">
        <el-table-column prop="job_name" label="岗位名称" width="180" />
        <el-table-column prop="company_name" label="企业名称" />
        <el-table-column prop="job_salary" label="薪资待遇" width="180" />
        <el-table-column width="180" label="编辑/删除">
          <template #default="scope">
            <el-button size="small" type="primary" @click="edit(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
    <div class="pagination">
          <el-pagination background layout="prev, pager, next" 
          :default-page-size="listCount"
          :total="totalCount" 
          @current-change="handleCurrentChange"
          />
    </div>
</div>
</template>

<script setup>
import Operation from '@/components/operation.vue'
import { inject, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
const $root = inject('$root')
const $axios = inject('$axios')
const router = useRouter()
let formData = ref([])
let listCount = 10
let totalCount = ref(0)
//获取页面数据
function getPageData(pageNo = 1) {
  $axios.get($root + `/recruit/?page=${pageNo}&page_size=${listCount}`)
    .then(r => {
      if (r.data.code == 200) {
        formData.value = r.data.data.data
        totalCount.value = r.data.data.total_count
      }
    })
}

/* 分页栏功能 */
const handleCurrentChange = (e)=>{
    /* e为当前页 */
    getPageData(e)
}

const del = (item) => {
  $axios.post($root + `/recruit/delete/${item.rid}/`)
    .then(r => {
      if (r.data.code == 200) {
        getPageData()
        ElMessage({
          message: '数据删除成功',
          type: 'success',
        })
      }
      else {
        ElMessage.error('数据删除失败')
      }
    })
}

const add = ()=>{
  router.push('/home/jobDetail') 
}

const edit = (item) => {
  router.push(`/home/jobDetail/${item.rid}`)
}

watch(() => router.currentRoute.value.name, (name) => {
  if (name == "jobs") {
    getPageData()
  }
}, { immediate: true, deep: true })
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}
</style>
